@use './global.scss' as vars; // 定义函数
@use 'sass:math';

@function rgba-color($color, $alpha) {
    @return rgba($color, $alpha);
}

// 图标
@for $i from 8 through 60 {
    .ic-#{$i} {
        width: #{$i}#{vars.$cm-unit};
        height: #{$i}#{vars.$cm-unit};
        object-fit: contain;
    }
}

@for $i from 1 through 10 {
    $alpha: math.div($i, 10);
    .cr-wt-#{$i} {
        color: rgba-color(vars.$white-color, $alpha);
    }
}

@for $i from 1 through 10 {
    $alpha: math.div($i, 10);
    .cr-bk-#{$i} {
        color: rgba-color(vars.$black-color, $alpha);
    }
}

.cr {
    &-pm {
        color: vars.$main-color;
    }
}

.bg {
    &-hd-bg {
        background: vars.$header-background;
    }

    &-f5 {
        background-color: #f5f5f5;
    }

    &-f8 {
        background-color: #f8f8f8;
    }

    &-f255 {
        background-color: #fff;
    }
}

.ts {
    &-al {
        transition: all 0.4s;
    }
}

.op {
    @for $i from 10 through 100 {
        &-#{$i} {
            opacity: math.div($i, 100);
        }
    }
}

$border-colors: (
    e7: #e7e7e7,
    pm: #2227d1,
    dc: #dcdcdc
);

.bd {
    @each $key, $value in $border-colors {
        @for $i from 1 through 50 {
            &-#{$key}-#{$i} {
                border: #{$i}#{vars.$cm-unit} solid $value;
            }
        }
        &-#{$key}-bt {
            border-bottom: 1 + #{vars.$cm-unit} solid $value;
        }
        &-#{$key}-tp {
            border-top: 1 + #{vars.$cm-unit} solid $value;
        }
        &-#{$key}-lf {
            border-left: 1 + #{vars.$cm-unit} solid $value;
        }
        &-#{$key}-rt {
            border-right: 1 + #{vars.$cm-unit} solid $value;
        }
    }

    @for $i from 1 through 50 {
        &-rd-#{$i} {
            border-radius: #{$i}#{vars.$cm-unit};
        }
    }
}

.cs {
    &-pt {
        cursor: pointer;
    }

    &-df {
        cursor: default;
    }
}

.of {
    &-at {
        overflow: auto;
    }

    &-hd {
        overflow: hidden;
    }

    &-y-sr {
        overflow-y: auto;
    }

    &-y-hd {
        overflow-y: hidden;
    }

    &-x-sr {
        overflow-x: auto;
    }

    &-x-hd {
        overflow-x: hidden;
    }

    &-np {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.hv {
    &-x-sr:hover {
        overflow-x: auto;
    }

    &-y-sr:hover {
        overflow-y: auto;
    }
}
